import React, { useEffect, useRef, useState } from 'react'
import { Row, Col } from 'antd'
import * as echarts from 'echarts';
import ReactECharts from 'echarts-for-react';
import axios from 'axios'
// import io from 'socket.io-client';
// const socket = io('http://localhost:7000');

const Index: React.FC = () => {
  const div = useRef<HTMLDivElement | null>(null);
  const [options, setOptions] = useState({})
  // 数据请求函数
  const fetchList = async () => {
    const resp = await axios.get('/api/list/echarts/bar');
    const data = resp.data.data
    const keys: string[] = [], values: number[] = []
    Object.entries(data).map(([key, value]) => {
      keys.push(key)
      values.push(value as number)
    })
    const chat = echarts.init(div.current)
    const d = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: keys,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: values
        }
      ]
    }
    chat.setOption(d)
    setOptions(d)
  }

  useEffect(() => {
    fetchList();
    // 1. 轮训
    const timer = setInterval(() => {
      fetchList();
    }, 500)

    return () => {
      clearInterval(timer);
    }

    // 2. 长链接 websocket
    // socket.on('connection', () => {
    //   console.log('链接服务器')
    //   socket.on('message', function (data) {
    //     console.log(`收到来自服务器的消息：${data}`);
    //     // const keys: string[] = [], values: number[] = []
    //     // Object.entries(data).map(([key, value]) => {
    //     //   keys.push(key)
    //     //   values.push(value as number)
    //     // })
    //     // const d = {
    //     //   tooltip: {
    //     //     trigger: 'axis',
    //     //     axisPointer: {
    //     //       type: 'shadow'
    //     //     }
    //     //   },
    //     //   grid: {
    //     //     left: '3%',
    //     //     right: '4%',
    //     //     bottom: '3%',
    //     //     containLabel: true
    //     //   },
    //     //   xAxis: [
    //     //     {
    //     //       type: 'category',
    //     //       data: keys,
    //     //       axisTick: {
    //     //         alignWithLabel: true
    //     //       }
    //     //     }
    //     //   ],
    //     //   yAxis: [
    //     //     {
    //     //       type: 'value'
    //     //     }
    //     //   ],
    //     //   series: [
    //     //     {
    //     //       name: 'Direct',
    //     //       type: 'bar',
    //     //       barWidth: '60%',
    //     //       data: values
    //     //     }
    //     //   ]
    //     // }
    //     // const chat = echarts.init(div.current)
    //     // chat.setOption(d)
    //     // setOptions(d)
    //   });
    // })
  }, [])
  return (
    <div>
      <Row>
        <Col span="12">
          <div ref={div} style={{ height: 400 }} className='box'></div>
        </Col>
        <Col span="12">
          <ReactECharts option={options} style={{ height: 400 }} />
        </Col>
      </Row>
    </div>
  )
}

export default Index